<!DOCTYPE html>
<html>
<head>
<style>
  html, body{
    height:100%;
    margin:0;
    border:0;
    padding:0;
    background:#45B8AC;
  }
  body{
    position:relative;
  }
  img{
    border:0;
    padding:0;
    margin:0 auto;
    max-width:100%;
    max-height:100%;
    display:block;
    position:absolute;
  }
</style>
</head>
<body>
  <img id="background"/>
  <img id="checkimg" src="check.svg" width="100" height="100" onClick="chooseBackground();">
  <script>
    (function(){
      var imgs = [
          'http://d.pr/i/nU2R+',
          'http://d.pr/i/coQY+',
          'http://d.pr/i/FIO9+'
        ],
        img = document.getElementsByTagName('IMG')[0],
        getStyle = function(elm){
          return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
        },
        bodyStyle = getStyle(document.body),
        toInt = function(pxSize){
          return +pxSize.replace(/px/,'');
        },
        chgImg = function(){
          img.src = imgs[i++ % imgs.length];
          img.onload = function(){
            var imgStyle = getStyle(img);
            img.style.left = ( toInt(bodyStyle.width)  - toInt(imgStyle.width) ) / 2 + 'px';
            img.style.top =  ( toInt(bodyStyle.height) - toInt(imgStyle.height) ) / 2 + 'px';
            img.onload = null;
          };
        },
        i = 0;

      chgImg();
      setInterval(chgImg, 3000);
    })();
    
    function chooseBackground(){
        bgimg = document.getElementById('background');
        alert(bgimg.src);
        location.href='index.html?background='+bgimg;
    }
  </script>
</body>
</html>​